<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p class="pEl">{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: '学生命周期了'
            },
            // 生命周期跟选项同级 不要把生命周期函数放在methods
            // 1. 创建阶段, 数据准备之前
            beforeCreate() {
                console.log('创建阶段, 数据准备之前 beforeCreate');
                let el = document.querySelector('.pEl')
                console.log('1',el);
            },
            // created 有vue实例了 一般获取数据
            created() {
                console.log('created  一般掉接口拿数据')
            },
            // 2. 挂载阶段 (渲染模版)
            beforeMount() {
                console.log('beforeMount 模版渲染之前')
            },
            // 可以操作dom  比如 echarts   地图渲染
            mounted() {
                console.log('mounted 可以操作dom了')
                let el = document.querySelector('.pEl')
                console.log('2', el);
            },
            // 3. 更新数据 (修改数据  更新试图)
            beforeUpdate() {
                console.log('beforeUpdate 数据修改了,视图还没更新');
            },
            updated() {
                console.log('updated 数据修改了,视图还更新完了');
            },
            // 4. 卸载阶段 一般清除定时器  清除绑定事件
            beforeDestroy() {
                console.log('beforeDestory 销毁前' );
            },
            destroyed() {
                console.log('destoryed 销毁后');
            }
        })
    </script>
</body>
</html>